<html>
	<head>
        <title>Dash - WebGL Self-Driving Car Simulator</title>
        <link rel="stylesheet" href="vendor/bulma.min.css" />
        <link rel="stylesheet" href="css/dash.css" />
        <meta charset="utf-8" />
	</head>
	<body>
        <div id="container">
            <div id="dashboard" class="gui-box sim-mode-box">
                <div id="planner-error" class="gui-box is-size-7 is-hidden" style="background: #422b;">
                    <span class="icon has-text-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                    </span>
                    <span class="has-text-grey-lighter" style="position: relative; top: -2px;">Error initializing motion planner. <a href="https://github.com/mattbradley/dash#browser-support" target="_blank">Check if your browser is supported</a>.</span>
                </div>
                <div id="controls" class="is-pulled-left">
                    <div id="brake"></div>
                    <div id="gas"></div>
                    <div id="gear"></div>
                    <div id="wheel-wrapper">
                        <div id="wheel">
                            <div id="wheel-marker"></div>
                        </div>
                        <div id="wheel-pie">
                            <div id="wheel-pie-left"></div>
                            <div id="wheel-pie-right"></div>
                        </div>
                    </div>
                </div>
                <div id="stats" class="is-pulled-right">
                    <div class="columns is-gapless" style="margin-bottom: 16px;">
                        <div class="column has-text-centered">
                            <div class="heading has-text-grey">Speed</div>
                            <div id="speed" class="is-size-6 has-text-grey-lighter has-text-weight-bold">&mdash;</div>
                            <div id="speed-units" class="units-button is-size-7 has-text-grey">m/s</div>
                        </div>
                        <div class="column has-text-centered">
                            <div class="heading has-text-grey">Station</div>
                            <div id="station" class="is-size-6 has-text-grey-lighter has-text-weight-bold">&mdash;</div>
                            <div id="station-units" class="units-button is-size-7 has-text-grey">meters</div>
                        </div>
                        <div class="column has-text-centered">
                            <div class="heading has-text-grey">Latitude</div>
                            <div id="latitude" class="is-size-6 has-text-grey-lighter has-text-weight-bold">&mdash;</div>
                            <div id="latitude-units" class="units-button is-size-7 has-text-grey">meters</div>
                        </div>
                        <div class="column has-text-centered">
                            <div class="heading has-text-grey">Plan Time</div>
                            <div id="plan-time" class="is-size-6 has-text-grey-lighter has-text-weight-bold">&mdash;</div>
                            <div class="is-size-7 has-text-grey">ms</div>
                        </div>
                    </div>
                    <div class="columns is-gapless">
                        <div class="column">
                            <div class="button is-small is-static" style="background: transparent; border: none; margin-left: 12px;">
                                <span class="icon is-small has-text-grey-lighter">
                                    <i class="fas fa-clock"></i>
                                </span>
                                <span id="elapsed-time" class="is-size-6 has-text-grey-lighter has-text-weight-bold">&mdash;</span>
                            </div>
                            <div class="is-pulled-right">
                                <div class="button is-small is-static is-pulled-left" style="background: transparent; border: none;">
                                    <span class="icon is-medium has-text-grey-lighter">
                                        <i class="fas fa-lg fa-car"></i>
                                    </span>
                                </div>
                                <div class="buttons has-addons" style="padding-left: 8px;">
                                    <span id="mode-manual" class="button is-small is-dark is-outlined is-inverted">Manual</span>
                                    <span id="mode-autonomous" class="button is-small is-dark is-outlined is-inverted">Autonomous</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="config-box" class="gui-box sim-mode-box">
                <div id="show-config-box">
                    <div id="show-welcome-modal" class="button is-small is-dark is-outlined is-inverted" title="About Dash">
                        <span class="icon is-medium">
                            <i class="fas fa-lg fa-info"></i>
                        </span>
                    </div>
                    &nbsp;
                    <div id="show-config-button" class="button is-small is-dark is-outlined is-inverted" title="Planner Config">
                        <span class="icon is-medium">
                            <i class="fas fa-lg fa-cog"></i>
                        </span>
                    </div>
                </div>
                <div id="config-box-content" class="is-hidden">
                    <div class="is-clearfix">
                        <div class="field is-grouped is-pulled-right">
                            <div class="control">
                                <div id="restore-defaults-config-button" class="button is-small is-danger" title="Restore Defaults">
                                    <span class="icon is-medium">
                                        <i class="fas fa-lg fa-undo-alt"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="control">
                                <div id="save-config-button" class="button is-small is-success" title="Save Config">
                                    <span class="icon is-medium">
                                        <i class="fas fa-lg fa-save"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="control">
                                <div id="hide-config-button" class="button is-small is-dark is-outlined is-inverted" title="Close">
                                    <span class="icon is-medium">
                                        <i class="fas fa-lg fa-times"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="title is-5 has-text-grey-lighter" style="padding-top: 2px; padding-right: 8px; background: transparent; border: none;">Planner Config</div>
                    </div>
                    <div style="margin-top: 16px; max-height: 400px; overflow-y: scroll;">
                        <form id="config-form"></form>
                    </div>
                </div>
            </div>
            <div id="editor-enabler" class="gui-box sim-mode-box">
                <div class="button is-small is-static is-pulled-left" style="background: transparent; border: none;">
                    <span class="icon is-medium has-text-grey-lighter">
                        <i class="fas fa-lg fa-road"></i>
                    </span>
                </div>
                <div class="field is-grouped" style="padding-left: 8px;">
                    <div class="control">
                        <span id="scenario-play" class="button is-small is-dark is-outlined is-inverted is-hidden" title="Play Scenario">
                            <span class="icon is-medium">
                                <i class="fas fa-lg fa-play"></i>
                            </span>
                        </span>
                        <span id="scenario-pause" class="button is-small is-dark is-outlined is-inverted" title="Pause Scenario">
                            <span class="icon is-medium">
                                <i class="fas fa-lg fa-pause"></i>
                            </span>
                        </span>
                        <span id="scenario-restart" class="button is-small is-dark is-outlined is-inverted" title="Restart Scenario">
                            <span class="icon is-medium">
                                <i class="fas fa-lg fa-undo-alt"></i>
                            </span>
                        </span>
                    </div>
                    <div class="control"></div>
                    <div class="control">
                        <span id="editor-enable" class="button is-small is-dark is-outlined is-inverted">Edit Scenario</span>
                        <span id="simulator-load" class="button is-small is-dark is-outlined is-inverted">Load Scenario</span>
                    </div>
                </div>
            </div>
            <div id="editor-scenario-info" class="gui-box edit-mode-box is-hidden has-text-right allow-user-select">
                <div id="editor-scenario-name" class="title is-5 has-text-grey-lighter" title="Untitled" style="line-height: 1.4;">Untitled</div>
                <div class="subtitle is-7">
                    <span class="has-text-grey">Last Saved:</span>
                    <span id="editor-scenario-saved-at" class="has-text-grey-lighter">Unsaved</span>
                </div>
            </div>
            <div class="edit-mode-box is-hidden">
                <div id="editor-road-box" class="gui-box is-hidden">
                    <div class="field is-horizontal">
                        <div class="field-label is-small" style="flex-grow: 100;">
                            <label class="label has-text-grey-light" for="editor-initial-speed">Initial Speed</label>
                        </div>
                        <div class="field-body">
                            <div class="field has-addons" style="width: 90px;">
                                <div class="control" style="margin-right: 0.5rem;">
                                    <input id="editor-initial-speed" class="input is-small" type="text" style="width: 60px;" />
                                </div>
                                <span class="is-size-7 has-text-grey" style="padding-top: 0.375rem;">m/s</span>
                            </div>
                        </div>
                    </div>
                    <div class="field is-horizontal">
                        <div class="field-label is-small" style="flex-grow: 100;">
                            <label class="label has-text-grey-light" for="editor-speed-limit">Speed Limit</label>
                        </div>
                        <div class="field-body">
                            <div class="field has-addons" style="width: 90px;">
                                <div class="control" style="margin-right: 0.5rem;">
                                    <input id="editor-speed-limit" class="input is-small" type="text" style="width: 60px;" />
                                </div>
                                <span class="is-size-7 has-text-grey" style="padding-top: 0.375rem;">m/s</span>
                            </div>
                        </div>
                    </div>
                    <div class="field is-horizontal">
                        <div class="field-label is-small" style="flex-grow: 100;">
                            <label class="label has-text-grey-light">Lane Preference</label>
                        </div>
                        <div class="field-body">
                            <div class="field has-addons" style="width: 90px;">
                                <div class="control">
                                    <div id="editor-lane-left" class="button is-small is-dark is-outlined is-inverted">
                                        <span class="icon is-medium">
                                            <i class="fas fa-lg fa-angle-left"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="control">
                                    <div id="editor-lane-right" class="button is-small is-dark is-outlined is-inverted">
                                        <span class="icon is-medium">
                                            <i class="fas fa-lg fa-angle-right"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="editor-dynamic-obstacles-box" class="gui-box is-hidden">
                    <div class="is-clearfix">
                        <div class="field is-pulled-right">
                            <div class="control">
                                <div id="editor-add-dynamic-obstacle" class="button is-small is-dark is-outlined is-inverted" title="Add Dynamic Obstacle">
                                    <span class="icon is-medium">
                                        <i class="fas fa-lg fa-plus"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="title is-5 has-text-grey-lighter" style="padding-top: 2px; padding-right: 8px; background: transparent; border: none;">Dynamic Obstacles</div>
                    </div>
                    <div class="columns is-gapless has-text-weight-bold">
                        <div class="column is-1"></div>
                        <div class="column is-3">
                            <abbr class="is-size-7 has-text-grey-lighter" title="Determines the size and shape of the dynamic obstacle">Type</abbr>
                        </div>
                        <div class="column is-1 has-text-centered">
                            <abbr class="is-size-7 has-text-grey-lighter" style="position: relative; left: -5px;" title="Check to align parallel to the road; uncheck to align perpendicular">Parallel</abbr>
                        </div>
                        <div class="column is-3 has-text-centered">
                            <abbr class="is-size-7 has-text-grey-lighter" title="Initial station-latitude position; station is in meters, and latitude is normalized where -1 is the left boundary and +1 is the right boundary">SL Position</abbr>
                        </div>
                        <div class="column is-3 has-text-centered">
                            <abbr class="is-size-7 has-text-grey-lighter" title="Station-latitude velocity in m/s">SL Velocity</abbr>
                        </div>
                        <div class="column is-1"></div>
                    </div>
                    <div id="editor-dynamic-obstacle-forms" style="margin-top: 16px; max-height: 400px; overflow-y: scroll;"></div>
                </div>
            </div>
            <div id="editor-stats" class="gui-box edit-mode-box is-hidden">
                <div id="editor-stats-sl" class="gui-box">
                    <div class="button is-small is-static has-text-grey-light is-paddingless" style="background: transparent; border: none;">
                        S:&nbsp;<b id="editor-stats-station">0</b>m
                    </div>
                    &nbsp;
                    <div class="button is-small is-static has-text-grey-light is-paddingless" style="background: transparent; border: none;">
                        L:&nbsp;<b id="editor-stats-latitude">0</b>m
                    </div>
                </div>
                <div class="button is-small is-static has-text-grey-light is-paddingless" style="background: transparent; border: none;">
                    Road Length:&nbsp;<b id="editor-stats-road-length">0.0</b>m
                </div>
                &nbsp;
                <div class="button is-small is-static has-text-grey-light is-paddingless" style="background: transparent; border: none;">
                    Static Obstacles:&nbsp;<b id="editor-stats-static-obstacles">0</b>
                </div>
                &nbsp;
                <div class="button is-small is-static has-text-grey-light is-paddingless" style="background: transparent; border: none;">
                    Dynamic Obstacles:&nbsp;<b id="editor-stats-dynamic-obstacles">0</b>
                </div>
            </div>
            <div id="editor-controls" class="gui-box edit-mode-box is-hidden">
                <div id="editor-help" class="gui-box is-size-7 has-text-grey">
                    <div id="editor-help-path" class="is-hidden">
                        <div class="gui-box flex">
                            <div class="has-text-weight-bold has-text-right" style="margin-right: 0.75rem;">
                                <div>Left-click</div>
                                <div>Left-click + Drag</div>
                                <div>Shift + Left-click</div>
                                <div>Right-click + Drag</div>
                            </div>
                            <div>
                                <div>Place road anchor</div>
                                <div>Move road anchor</div>
                                <div>Delete road anchor</div>
                                <div>Pan view</div>
                            </div>
                        </div>
                        <div>
                            The <i>road</i> is two lanes wide and is
                            represented by a spline curve controlled by anchor
                            points. Road positions use station-latitude (SL)
                            coordinates.  Station is the longitudinal distance
                            along the arc-length of the road. Latitude is the
                            lateral offset to the left (negative) or right
                            (positive) of the road centerline.
                        </div>
                    </div>
                    <div id="editor-help-static-obstacles" class="is-hidden">
                        <div class="gui-box flex">
                            <div class="has-text-weight-bold has-text-right" style="display: flex; flex-direction: column; margin-right: 0.75rem;">
                                <div style="flex-grow: 2; display: flex; align-items: center; justify-content: flex-end;">Left-click + Drag</div>
                                <div>Shift + Left-click</div>
                                <div>Ctrl + Left-click + Drag</div>
                                <div>Right-click + Drag</div>
                            </div>
                            <div>
                                <div>Place new obstacle</div>
                                <div><i>or</i> Move obstacle</div>
                                <div>Delete obstacle</div>
                                <div>Rotate obstacle</div>
                                <div>Pan view</div>
                            </div>
                        </div>
                        <div>
                            <i>Static obstacles</i> do not move during the
                            course of the simulation. They can be used to
                            represent things like parked cars, road debris,
                            construction zones, etc.
                        </div>
                    </div>
                    <div id="editor-help-dynamic-obstacles" class="is-hidden">
                        <i>Dynamic obstacles</i> will move along the road
                        according to their velocities, starting from their
                        initial station-latitude positions. The initial
                        latitude is a normalized value between -1 and +1,
                        corresponding to the latitudes of the left and right
                        lane boundaries.
                    </div>
                </div>
                <div class="button is-small is-static is-pulled-left" style="background: transparent; border: none;">
                    <span class="icon is-medium has-text-grey-lighter">
                        <i class="fas fa-lg fa-road"></i>
                    </span>
                </div>
                <div class="field-body" style="padding-left: 8px;">
                    <div class="field">
                        <div class="control">
                            <span id="editor-load" class="button is-small is-info" title="Load Scenario">
                                <span class="icon is-medium">
                                    <i class="fas fa-lg fa-folder-open"></i>
                                </span>
                            </span>
                        </div>
                    </div>
                    <div class="field">
                        <div class="control">
                            <span id="editor-save" class="button is-small is-success" title="Save Scenario">
                                <span class="icon is-medium">
                                    <i class="fas fa-lg fa-save"></i>
                                </span>
                            </span>
                        </div>
                    </div>
                    <div class="field">
                        <div class="control">
                            <span id="editor-share" class="button is-small is-warning" title="Share Scenario">
                                <span class="icon is-medium">
                                    <i class="fas fa-lg fa-link"></i>
                                </span>
                            </span>
                        </div>
                    </div>
                    <div class="field"></div>
                    <div class="field">
                        <div class="control">
                            <span id="editor-finalize" class="button is-small is-link">
                                <span class="icon">
                                    <i class="fas fa-play"></i>
                                </span>
                                <span>Run</span>
                            </span>
                        </div>
                    </div>
                    <div class="field"></div>
                    <div class="field has-addons">
                        <div class="control">
                            <span id="editor-path" class="button is-small is-dark is-outlined is-inverted">Road</span>
                        </div>
                        <div class="control">
                            <span id="editor-obstacles" class="button is-small is-dark is-outlined is-inverted">Static Obstacles</span>
                        </div>
                        <div class="control">
                            <span id="editor-dynamic-obstacles" class="button is-small is-dark is-outlined is-inverted">Dynamic Obstacles</span>
                        </div>
                    </div>
                    <div class="field" style="position: relative;">
                        <div class="control">
                            <span id="editor-clear" class="button is-small is-danger">Clear&hellip;</span>
                            <div id="editor-clear-options" class="gui-box is-hidden">
                                <div class="buttons">
                                    <span id="editor-clear-all" class="button is-small is-danger">All</span>
                                    <span id="editor-clear-dynamic-obstacles" class="button is-small is-warning">Dynamic Obstacles</span>
                                    <span id="editor-clear-obstacles" class="button is-small is-warning">Static Obstacles</span>
                                    <span id="editor-clear-path" class="button is-small is-warning">Road</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="cameras" class="gui-box sim-mode-box">
                <div class="button is-small is-static is-pulled-left" style="background: transparent; border: none;">
                    <span class="icon is-medium has-text-grey-lighter">
                        <i class="fas fa-lg fa-eye"></i>
                    </span>
                </div>
                <div class="button is-small is-static has-text-grey-light has-text-right is-paddingless is-pulled-right" style="margin-left: 8px; width: 50px; background: transparent; border: none;">
                    <span id="fps">&mdash;</span> fps
                </div>
                <div class="field is-grouped" style="padding-left: 8px;">
                    <div class="control">
                        <div class="buttons has-addons" style="margin-bottom: 0;">
                            <span id="camera-chase" class="button is-small is-dark is-outlined is-inverted" style="margin-bottom: 0;">Chase</span>
                            <span id="camera-topDown" class="button is-small is-dark is-outlined is-inverted" style="margin-bottom: 0;">Top Down</span>
                            <span id="camera-free" class="button is-small is-dark is-outlined is-inverted" style="margin-bottom: 0;">Free</span>
                        </div>
                    </div>
                    <div class="control">
                        <div class="buttons has-addons" style="margin-bottom: 0;">
                            <span id="camera-2D" class="button is-small is-dark is-outlined is-inverted" style="margin-bottom: 0;">2D</span>
                            <span id="camera-3D" class="button is-small is-dark is-outlined is-inverted" style="margin-bottom: 0;">3D</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="welcome-modal" class="modal">
            <div id="welcome-modal-background" class="modal-background" style="background-color: transparent;"></div>
            <div class="modal-content content">
                <div class="modal-box has-text-grey-lighter">
                    <div class="hero is-dark is-bold" style="position: relative;">
                        <button id="welcome-modal-close" class="delete is-medium" style="position: absolute; top: 0.5rem; right: 0.5rem;"></button>
                        <div class="hero-body" style="padding: 1.5rem;">
                            <div class="title is-4"><b>Dash</b> Self-Driving Car Simulator</div>
                            <div class="subtitle is-6">Built with WebGL and Three.js</div>
                        </div>
                    </div>
                    <p></p>
                    <p>
                        This project demonstrates a real-time, on-road,
                        lattice-based autonomous vehicle motion planner in the
                        browser.  Many autonomous vehicle motion planners are
                        implemented close to the metal in C or C++, or they
                        utilize computing platforms like CUDA or OpenCL to
                        generate plans in a highly parallel fashion on the GPU.
                        Using WebGL, we can implement similar parallel planning
                        algorithms right in the browser that can run on a
                        variety of moderately-powerful consumer graphics cards.
                        With Three.js, the motion planner can be executed in
                        real-time 3D simulated scenarios.
                    </p>
                    <p>
                        This simulator is still a work-in-progress. You may see
                        bugs, WebGL crashes, strange vehicle behavior, and any
                        number of other failures. Currently, it is fully functional
                        only in <a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a>
                        with <a href="https://github.com/mattbradley/dash/blob/master/README.md#enable-hardware-acceleration" target="_blank">hardware acceleration enabled</a>
                        and <a href="https://github.com/mattbradley/dash/blob/master/README.md#enable-experimental-canvas-features" target="_blank">experimental canvas features enabled</a>.
                        The target frame rate is 60fps, but it may run
                        slower depending on how long planning takes on your
                        hardware.
                    </p>
                    <p>
                        Next steps: try out several
                        <a id="welcome-modal-examples">example scenarios</a>
                        or <a id="welcome-modal-create">create your own</a>.
                    </p>
                    <p>
                        The source code and more information can be found in the
                        <a href="https://github.com/mattbradley/dash/blob/master/README.md" target="_blank">README</a>.
                    </p>
                    <p class="is-size-7 has-text-grey">
                        &copy; 2018 Matt Bradley &bull; <a href="https://github.com/mattbradley/dash/blob/master/LICENSE" target="_blank">MIT License</a> &bull; <a href="https://github.com/mattbradley/dash" target="_blank">GitHub</a>
                    </p>
                </div>
            </div>
        </div>

        <div id="scenarios-modal" class="modal">
            <div id="scenarios-modal-background" class="modal-background" style="background-color: transparent;"></div>
            <div class="modal-content">
                <div class="modal-box has-text-grey-lighter">
                    <button id="scenarios-modal-close" class="delete is-medium is-pulled-right"></button>
                    <div class="title is-5 has-text-grey-lighter">Load Scenario</div>
                    <div id="scenarios-modal-tabs" class="tabs is-small is-toggle">
                        <ul>
                            <li id="scenarios-modal-examples-tab-button"><a>Example Scenarios</a></li>
                            <li id="scenarios-modal-saved-tab-button"><a>Saved Scenarios</a></li>
                            <li id="scenarios-modal-import-tab-button"><a>Import Scenario</a></li>
                        </ul>
                    </div>
                    <div id="scenarios-modal-examples-tab" class="scenarios-modal-tab is-hidden has-text-weight-bold has-text-grey-lighter">
                        <div style="height: calc(100% + 0.75rem);">
                            <div class="columns">
                                <div id="example-0" class="column">
                                    <img src="images/examples/one_car_overtake.png" />
                                    <div class="name">One-car overtake</div>
                                </div>
                                <div id="example-1" class="column">
                                    <img src="images/examples/two_car_overtake.png" />
                                    <div class="name">Two-car overtake</div>
                                </div>
                            </div>
                            <div class="columns">
                                <div id="example-2" class="column">
                                    <img src="images/examples/rough_road.png" />
                                    <div class="name">Rough road</div>
                                </div>
                                <div id="example-3" class="column">
                                    <img src="images/examples/dodging_a_speeder.png" />
                                    <div class="name">Dodging a speeder</div>
                                </div>
                            </div>
                            <div class="columns">
                                <div id="example-4" class="column">
                                    <img src="images/examples/lane_blockage.png" />
                                    <div class="name">Lane blockage with oncoming traffic</div>
                                </div>
                                <div id="example-5" class="column">
                                    <img src="images/examples/merging.png" />
                                    <div class="name">Merging into slower traffic</div>
                                </div>
                            </div>
                            <div class="columns">
                                <div id="example-6" class="column">
                                    <img src="images/examples/crosswalks.png" />
                                    <div class="name">Negotiating crosswalks</div>
                                </div>
                                <div id="example-7" class="column">
                                    <img src="images/examples/peloton.png" />
                                    <div class="name">Chasing the peloton</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="scenarios-modal-saved-tab" class="scenarios-modal-tab is-hidden">
                        <div class="columns">
                            <div id="scenarios-sort-name" class="column is-7 is-size-7 scenario-sort-button">Name</div>
                            <div id="scenarios-sort-saved-at" class="column is-4 is-size-7 scenario-sort-button is-underlined">Saved Date</div>
                            <div class="column is-1"></div>
                        </div>
                        <div id="scenarios-modal-items"></div>
                    </div>
                    <div id="scenarios-modal-import-tab" class="scenarios-modal-tab is-hidden">
                        <div class="field" style="flex: 1; display: flex; flex-direction: column;">
                            <div class="control" style="flex: 1; display: flex; flex-direction: column;">
                                <textarea id="scenario-import-box" class="textarea" type="text" placeholder="Paste exported scenario code here" style="flex: 1; resize: none; border-width: 2px;"></textarea>
                            </div>
                            <div id="scenario-import-info" class="is-size-7 is-hidden" style="margin-top: 1.5rem;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="scenario-share-modal" class="modal">
            <div id="scenario-share-modal-background" class="modal-background" style="background-color: transparent;"></div>
            <div class="modal-content">
                <div class="modal-box has-text-grey-lighter">
                    <button id="scenario-share-modal-close" class="delete is-medium is-pulled-right"></button>
                    <div class="title is-5 has-text-grey-lighter">Share Scenario</div>
                    <div>This link will automatically run the scenario when loaded:</div>
                    <div class="field has-addons">
                        <div class="control has-icons-left is-expanded">
                            <input id="scenario-share-link" class="input" type="text" readonly value="http://google.com" />
                            <span class="icon is-small is-left">
                                <i class="fas fa-link"></i>
                            </span>
                        </div>
                        <div class="control">
                            <div id="scenario-share-clipboard" class="button">
                                <div>
                                    <span id="scenario-share-clipboard-icon" class="icon is-small">
                                        <i class="fas fa-clipboard"></i>
                                    </span>
                                </div>
                                <div>
                                    <span id="scenario-share-clipboard-success-icon" class="icon is-small is-hidden">
                                        <i class="fas fa-clipboard-check"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        This code can be imported using the Load menu:
                    </div>
                    <div class="field">
                        <div class="control">
                            <textarea id="scenario-share-box" class="textarea" type="text" readonly style="height: calc(40vh); resize: none;"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script defer src="vendor/fontawesome-all.js"></script>
        <script src="vendor/three.js"></script>
        <script src="vendor/THREE.MeshLine.js"></script>
        <script src="js/Utils.js"></script>
        <script src="dist/PathPlannerWorker.js"></script>
        <script src="dist/Dash.js"></script>
	</body>
</html>
